<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.List" %>
<%@page import="com.javaforever.clocksimplejee4.domain.ClockRecord"%>
<%@page import="com.javaforever.clocksimplejee4.domain.User"%>
<%@page import="com.javaforever.clocksimplejee4.serviceimpl.ClockRecordServiceImpl"%>
<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Clock Record Info.</title>
        <link href="../css/testdefault.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../js/faceclock.js"></script>
    </head>   
    <body>
        <div id="wrapper">
        <jsp:include page="../include/header.jsp" />
            <!-- end div#header -->
            <div id="page">
                <div id="content">
                    <div id="welcome">
                        <h2></h2>
                        <!-- Fetch Rows -->
                            <video id="video" width="320" height="320" autoplay></video>
						    <button id="picture" style="display:block" >拍照</button>
						    <canvas style="display:block" id="canvas" width="320" height="320"></canvas>
						    <button id="sc" style="display:block" >上传</button>  
	                        <textarea id="image" name="image" cols="40" rows="8"></textarea><br/>
	                        <textarea name="description" id="description"></textarea>
							<input type="button" name="clocknow" value="Clock Me Now!" onclick="faceclock()"/>
						<br>
						<br>
						<input type="text" readonly="readonly" name = "duration" value="<%=new ClockRecordServiceImpl().todayDuration((User)session.getAttribute("userData"))%>"></input>
						 <table class="aatable">
                            <tr>
                                <th>Id</th>
                                <th>UserId</th>
                                <th>EmpId</th>    
                                <th>Timestamp</th>    
                                <th>Description</th>                             
                            </tr>
                            <%
		                           long id = 0L;                                      	
		                   		   List<ClockRecord> clockRecordList = new ClockRecordServiceImpl().listAllTodayClockRecord((User)session.getAttribute("userData"));
		                           
		                           for(int index=0;index < clockRecordList.size();index++){
		                        	   ClockRecord clockRecord = clockRecordList.get(index);
		                               out.println("<tr>");
		                               out.println("<td>"+clockRecord.getId()+"</td>");                         
		                               out.println("<td>"+clockRecord.getUserId()+"</td>");
		                               out.println("<td>"+clockRecord.getEmpId()+"</td>");
		                               out.println("<td>"+clockRecord.getTimeStamp()+"</td>");
		                               out.println("<td>"+clockRecord.getDescription()+"</td>");                                    
		                               out.println("</tr>");
		                           }
                            %>

                        </table>
                    </div>
                    <!-- end div#welcome -->
                </div>
                <!-- end div#content -->
                <div id="sidebar">   
                	<ul>
                    	<%	if("Y".equals((String)request.getSession().getAttribute("isadmin"))){%>
                    	<jsp:include page="../include/adminnav.jsp"/>
                    	<%} else { %>
                    	<jsp:include page="../include/usernav.jsp"/>
                    	<%} %>
                        <!-- end navigation -->
                        	<jsp:include page="../include/updates.jsp"/>
                        <!-- end updates -->
                    </ul>                   
                </div>
                <!-- end div#sidebar -->
                <div style="clear: both; height: 1px"></div>
            </div>
            <jsp:include page="../include/footer.jsp"/>
        </div>        
        <!-- end div#wrapper -->
    </body>
     <script>
        function run(input_file,get_data){
            /*input_file：文件按钮对象*/
            /*get_data: 转换成功后执行的方法*/
            if ( typeof(FileReader) === 'undefined' ){
                alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
            } else {
                try{
                    /*图片转Base64 核心代码*/
                    var file = input_file.files[0];
                    //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
                    if(!/image\/\w+/.test(file.type)){
                        alert("请确保文件为图像类型");
                        return false;
                    }
                    var reader = new FileReader();
                    reader.onload = function(){
                        get_data(this.result);
                    }
                    reader.readAsDataURL(file);
                }catch (e){
                    alert('图片转Base64出错啦！'+ e.toString())
                }
            }
        }
        $(function () {
           $("input").change(function () {
               run(this, function (data) {
                   $('img').attr('src',data);
                   var str = data.split(",")[1];             
                   $('#image').val(str);
               });
           });
        });
        
        function faceclock(){
        	$.ajax({
        		type : "post",
        		url : "../facade/faceClockFacade",
        		dataType : 'json',
        		data : {
        			image : $("#image").val(),
        			description : $("#description").val(),
        			token: token
        		},
        		success : function(data, textStatus) {
        			if (data.success){
        				alert(data.user.score);
        				window.location.href = "../jsp/cameraclockhome.jsp?token="+token
        			}else if (!data.success){
        				alert(data.score);
        				alert(data.errorMessage);
        				window.location.href = "../jsp/cameraclockhome.jsp?token="+token;
        			}        						
        		},
        		complete : function(XMLHttpRequest, textStatus) {
        		},
        		error : function(XMLHttpRequest, textStatus, errorThrown) {
        			alert("Error:" + textStatus);
        			alert(errorThrown.toString());
        		}
        	});
        }
        
        navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia;
        if (navigator.getUserMedia) {
            navigator.getUserMedia({ audio: true, video: { width: 320, height: 320 } },
                    function(stream) {
                        var video = document.getElementById("video");
                        video.src = window.URL.createObjectURL(stream);
                        video.onloadedmetadata = function(e) {
                            console.log('nihao44eee4aaaaddda');
                            video.play();
                        };
                    },
                    function(err) {
                        console.log("The following error occurred: " + err.name);
                    }
            );
        } else {
            console.log("getUserMedia not supported");
        }
        var context = document.getElementById("canvas").getContext("2d");
        document.getElementById("picture").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 320, 320);
        });
        document.getElementById("sc").addEventListener("click", function () {
            var imgData=document.getElementById("canvas").toDataURL("image/png");
            var data=imgData.substr(22);
            //$.post('recorder/target/sc',{'sj':data});
            $("#image").val(data);
        });
    </script>
</html>
